<template>
	<van-pull-refresh v-model="isLoading" @refresh="onRefresh" :disabled="refDisabled">
	<div class="content" ref="pageInfo">
		<div class="navTop">
			<back-img></back-img>
			
			<div class="tips flex2">
				<div class="flex1" v-if='userInfo.pid' @click="showPicker=true">
					<div>就诊人 <span>{{userInfo.pat_name||''}}（{{userInfo.phno||''}}）</span></div>
					<img src="@/assets/img/index/more_w.png" alt="">
				</div>
				<div class="flex1" v-else @click="toPageLink('/addVisitor')">
					添加就诊人
					<img src="@/assets/img/index/more_w.png" alt="">
				</div>
			</div>
			<van-tabs v-model="active" @change='change'>
			  <van-tab :title="item.name" title-inactive-color='#777' title-active-color='#292929' v-for="(item,index) in tabList" :key="index" />
			</van-tabs>
			<div class="timeList">
				<div @click="chooseTime(i)" :class="timeIndex==i?'active':''" class="timeList-i" v-for="(v,i) in timeList" :key='i'>{{v.name}}</div>
			</div>
		</div>
		<div class="info">
			<div>
				<div class="names">山西天慈医院</div>
				<div class="info-list" @click="toShow(v)" v-for="(v,i) in reportList" :key='i'>
					<div class="info-list-title">报告时间：{{v.report_time}}</div>
					<div class="info-list-item flex1">
						<div class="info-list-info">
							<div class="info-list-tag">门诊</div>
							{{v.citem_content}}
						</div>
						<i class="more_gIcon"></i>
					</div>
				</div>
				<div class="noData" v-if='reportList.length<=0'>
					<img class="noData-img" src="/img/nodata.5e986c71.png" alt="">
					<div class="noData-text">未查到数据</div>
				</div>
			</div>
		</div>
		<van-popup v-model:show="showPicker" round position="bottom">
		  <van-picker
		    :show-toolbar='true'
		    :columns="columns"
			value-key='pat_name'
		    @cancel="showPicker = false"
		    @confirm="onConfirm"
		  />
		</van-popup>
	</div>
	</van-pull-refresh>
</template>

<script>
	import {mapGetters,mapState} from 'vuex';
	export default {
		data() {
			return {
				isLoading: false,
				scrollTop:0,
				refDisabled:false,
				columns:[],
				userInfo:{},
				showPicker:false,
				active:0,
				tabList:[
					{name:'检验报告',type:0,},
					{name:'检查报告',type:1}
				],
				timeList:[//1周 7 1月  30   1年360 
					{name:'一周内',key:'7'},
					{name:'一月内',key:'30'},
					{name:'一年内',key:'360'},
					{name:'两年内',key:'720'}
				],
				timeIndex:0,
				reportList:[]
			};
		},
		computed: {
			...mapState({
				portInfo: 'portInfo'
			})
		},
		created(){
			if(this.portInfo.timeIndex){
				this.timeIndex=this.portInfo.timeIndex
				this.active=this.portInfo.active
				this.userInfo=this.portInfo.userInfo
				this.getList()
			}else{
				this.petList()
			}
		},
		mounted(){
			let box = this.$refs.pageInfo;
			box.addEventListener('scroll',()=>{
				this.scrollTop = box.scrollTop;
			});
		},
		watch: {
			scrollTop(val){
				if(val==0){
					this.refDisabled=false
				}else{
					this.refDisabled=true
				}
			}
		},
		methods: {
			onRefresh() {
				if(this.userInfo.pid){
					this.getList()
				}
				setTimeout(() => {
					this.isLoading = false;
				}, 500);
			},
			petList() {
				let that=this
				let url = "/api/pat/list";
				this.$axios.get(url).then(res => {
					that.columns = res.pat_info
					var user={}
					if(that.columns.length>0){
						that.columns.forEach((item, index) => {
							if(item.is_self){
								user=item
							}
						})
					}
					if(!user.id&&that.columns.length>0){
						user=that.columns[0]
					}
					that.userInfo=user
					if(that.userInfo.pid){
						that.getList()
					}
				})
				.catch(err => {
					console.log("err", err);
				});
			},
			change(e){
				this.active=e
				this.reportList=[]
				if(this.userInfo.pid){
					this.getList()
				}
			},
			getList(){
				let that=this
				let url = "/api/his/testReportList";//检验
				if(that.active==1){
					url='/api/his/checkReportList'//检查
				}
				this.$axios.post(url,{
					query_key:'1',
					query_content:that.userInfo.pid,
					days:that.timeList[that.timeIndex].key||''
				}).then(res => {
					if(res){
						that.reportList=that.active==0?res.lab_list:res.rad_list
					}
				}).catch(err => {
					console.log("err", err);
				});
			},
			onConfirm(e){
				this.showPicker=false
				this.reportList=[]
				this.userInfo=e
				if(this.userInfo.pid){
					this.getList()
				}
			},
			chooseTime(i){
				this.timeIndex=i
				this.reportList=[]
				if(this.userInfo.pid){
					this.getList()
				}
			},
			toShow(item){
				var info={
					timeIndex:this.timeIndex,
					active:this.active,
					userInfo:this.userInfo
				}
				this.$store.commit("updateportInfo",info);
				if(this.active==1){//检查
					this.$router.push({
						path:'/checkReportShow',
						query:{
							report_id:item.report_id
						},
					})
				}else{
					this.$router.push({
						path:'/testReportShow',
						query:{
							report_id:item.report_id
						},
					})
				}
			},
			toPageLink(url){
				this.$router.push({
					path:url,
					query:{},
				})
			}
		}
	};
</script>

<style lang="less" scoped>
	.content{
		min-height:calc(100vh - 50px);
		background-color:#f0f8f8;
		padding-bottom: 50px;
		.times{
			font-size: 13px;
			font-family: PingFang;
			font-weight: 500;
			color: #333333;
			padding-bottom: 9px;
			padding-top: 9px;
			padding-left: 19px;
		}
		.timeList{
			margin-top: 4px;
			height:37px;
			padding: 0 10px;
			display: flex;
			align-items: center;
			justify-content:space-between;
			&-i{
				width: 85px;
				height: 23px;
				background: #FFFFFF;
				border-radius: 5px;
				font-size: 13px;
				font-family: MiSans;
				font-weight: 400;
				color: #373737;
				text-align: center;
				line-height: 23px;
			}
			.active{
				width: 85px;
				height: 23px;
				background:#DCF0F9;
				border: 1px solid #4A8CFF;
				border-radius: 5px;
			}
		}
		/deep/.van-tabs__line{
			background: #4A8CFF;
		}
		.info{
			padding-top:130px;
			padding-bottom: 54upx;
			.names{
				padding:8px 18px 15px 18px;
				font-size: 15px;
				font-family: PingFang;
				font-weight: 500;
				color: #333333;
			}
			&-list{
				padding: 0 18px;
				width: 375px;
				background: #FFFFFF;
				font-size: 14px;
				font-family: PingFang;
				font-weight: 500;
				color: #333333;
				margin-bottom:6px;
				&-item{
					padding: 15px 0;
					border-top: 1px solid #EEEEEE;
				}
				&-info{
				   display: flex;
				   align-items: center;
				}
				&-tag{
					padding: 0 8px;
					height: 18px;
					background: linear-gradient(-90deg, #17BBB6 0%, #62DE9B 100%);
					border-radius: 9px;
					line-height: 18px;
					display: inline-block;
					font-size: 11px;
					font-family: PingFang;
					font-weight: 500;
					color: #FFFFFF;
					margin-right: 7px;
				}
				&-title{
					padding: 10px 0;
					font-size: 13px;
					font-family: PingFang;
					font-weight: 500;
					color: #666;
				}
			}
		}
		.navTop{
			width: 375px;
			position: fixed;
			top: 0;
			z-index: 9;
			height: 125px;
			background-color:#f0f8f8;
		}
		.tips{
			padding:0 18px;
			width: 375px;
			height: 44px;
			background: linear-gradient(-90deg, #68E198 0%, #13BAB8 100%);
			font-size: 15px;
			font-family: MiSans;
			font-weight: 500;
			color: #FFFFFF;
			span{
				margin-left: 23px;
			}
			img{
				width: 20px;
			}
		}
	}
</style>